<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>妙奇星球</title>
    <!-- Styles -->
    <link href="css/app.css" rel="stylesheet">
    <script src="js/manifest.js"></script>
    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<div id="app" v-cloak>

    <el-container style="position: relative;">
        <!-- 顶部导航栏 Top nav -->
        <el-header
                style="position: fixed; z-index: 999; font-size: 18px; font-weight: 400; background-color:#816eb1; width: 100%; height:50px; line-height: 50px;">
            <span>
                <i class="el-icon-s-operation" @click="menu_left.open = true"
                   style="margin-left: 16px; font-size: 20px; cursor: pointer; color: #fff; line-height: 1;"></i>
            </span>
            <span style="float: right">
                <i class="el-icon-s-tools" @click="menu_left.open = true"
                   style="margin-left: 16px; font-size: 20px; cursor: pointer; color: #fff; line-height: 1;"></i>
            </span>
        </el-header>
        <section style="margin-top: 50px;"></section>

        <!-- 左侧导航抽屉 Left Navbar -->
<!--        <section>-->
<!--            <aside class="aside">-->
<!--                <el-drawer size="240px" :with-header="false" :show-close="false"-->
<!--                           :visible.sync="menu_left.open" :direction="menu_left.direction">-->

<!--                    <router-link to="/missions">任务</router-link>-->
<!--                </el-drawer>-->
<!--            </aside>-->
<!--        </section>-->

        <!-- 主体 Content -->
        <router-view></router-view>
        <!--        <section>-->
        <!--            &lt;!&ndash; 搜索筛选栏 &ndash;&gt;-->
        <!--            <el-row type="flex">-->
        <!--                &lt;!&ndash; 下拉菜单：任务类型 &ndash;&gt;-->
        <!--                <el-col class="mq-filter" style="width:160px;">-->
        <!--                    <el-select placeholder="任务类型" size="mini" style="width:160px;" clearable-->
        <!--                               v-model="mission_types.current_key"-->
        <!--                               @change="MissionsTableFilterTypeChange">-->
        <!--                        <el-option v-for="item in mission_types.data"-->
        <!--                                   :key="item.key" :label="item.value" :value="item.key">-->
        <!--                        </el-option>-->
        <!--                    </el-select>-->
        <!--                </el-col>-->
        <!--                &lt;!&ndash; 输入框：任务信息 &ndash;&gt;-->
        <!--                <el-col class="mq-filter" style="border-left: 1px solid #dcdfe6;">-->
        <!--                    <el-input type="text" v-model="missions.filter.keyword" size="mini" clearable-->
        <!--                              prefix-icon="el-icon-search"-->
        <!--                              placeholder="任务编号 名称 描述 奖励 可解锁"-->
        <!--                              @input=MissionsTableFilterKeywordChange>-->
        <!--                    </el-input>-->
        <!--                </el-col>-->
        <!--            </el-row>-->
        <!--            &lt;!&ndash; 任务数据表格 &ndash;&gt;-->
        <!--            <el-row type="flex" justify="center">-->
        <!--                <el-col>-->
        <!--                    <el-table size="small" :data="missions.data" :height="tableHeight"-->
        <!--                              :header-cell-style="{background:'#f4f7fa', color:'#909399'}"-->
        <!--                              :header-row-style="{height:'40px', fontSize:'14px'}"-->
        <!--                              :row-style="{whiteSpace: 'nowrap'}"-->
        <!--                              :cell-style="{whiteSpace: 'nowrap'}"-->
        <!--                              @sort-change="MissionsTableSortChange">-->
        <!--                        &lt;!&ndash; No &ndash;&gt;-->
        <!--                        <el-table-column fixed sortable="custom" prop="no" label="No" width="80"></el-table-column>-->

        <!--                        &lt;!&ndash; 任务类型 &ndash;&gt;-->
        <!--                        <el-table-column sortable="custom" prop="type" label="任务类型" width="150"></el-table-column>-->

        <!--                        &lt;!&ndash; 任务名称 &ndash;&gt;-->
        <!--                        <el-table-column prop="title" label="任务名" width="120"></el-table-column>-->

        <!--                        &lt;!&ndash; 任务需求 &ndash;&gt;-->
        <!--                        <el-table-column prop="requirement_desc" label="描述" width=""></el-table-column>-->

        <!--                        &lt;!&ndash; 任务奖励 &ndash;&gt;-->
        <!--                        <el-table-column prop="rewards_desc" label="任务奖励" width=""-->
        <!--                                         :show-overflow-tooltip="true"-->
        <!--                        ></el-table-column>-->

        <!--                        &lt;!&ndash; 可解锁 &ndash;&gt;-->
        <!--                        <el-table-column sortable="custom" prop="unlock" label="可解锁"></el-table-column>-->

        <!--                        &lt;!&ndash; 大神建议 &ndash;&gt;-->
        <!--                        <el-table-column prop="hint" label="攻略提示"></el-table-column>-->
        <!--                    </el-table>-->

        <!--                    <el-row type="flex" style="height: 38px; padding-left: 18px;">-->
        <!--&lt;!&ndash;                        <el-col style="width: 70px;  line-height: 38px;">&ndash;&gt;-->
        <!--&lt;!&ndash;                            <span style="font-size: 14px; color: #333;">分页</span>&ndash;&gt;-->
        <!--&lt;!&ndash;                        </el-col>&ndash;&gt;-->
        <!--                        <el-col style="width: 150px;">-->
        <!--&lt;!&ndash;                            <el-dropdown type="button" :split-button="true"&ndash;&gt;-->
        <!--&lt;!&ndash;                                         trigger="click" placement="top"&ndash;&gt;-->
        <!--&lt;!&ndash;                            >&ndash;&gt;-->
        <!--&lt;!&ndash;                              <span class="el-dropdown-link">&ndash;&gt;-->
        <!--&lt;!&ndash;                                下拉菜单 <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&ndash;&gt;-->
        <!--&lt;!&ndash;                              </span>&ndash;&gt;-->
        <!--&lt;!&ndash;                                <el-dropdown-menu slot="dropdown">&ndash;&gt;-->
        <!--&lt;!&ndash;                                    <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>&ndash;&gt;-->
        <!--&lt;!&ndash;                                    <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>&ndash;&gt;-->
        <!--&lt;!&ndash;                                    <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>&ndash;&gt;-->
        <!--&lt;!&ndash;                                    <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>&ndash;&gt;-->
        <!--&lt;!&ndash;                                    <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>&ndash;&gt;-->
        <!--&lt;!&ndash;                                </el-dropdown-menu>&ndash;&gt;-->
        <!--&lt;!&ndash;                            </el-dropdown>&ndash;&gt;-->

        <!--                            <div class="block" style="width: 100%; display: inline-block; ">-->
        <!--                                <el-slider v-model="missions.paginator.per_page"-->
        <!--                                           :min="missions.paginator.page_sizes[0]"-->
        <!--                                           :max="missions.paginator.page_sizes[1]"-->
        <!--                                           :step="missions.paginator.page_step"-->
        <!--                                           :format-tooltip="() => {return missions.paginator.per_page + '条/页'}"-->
        <!--                                           @change="MissionTablePageSizeChange">-->
        <!--                                </el-slider>-->
        <!--                            </div>-->
        <!--                        </el-col>-->
        <!--                        <el-col>-->
        <!--                            <div class="pagination" style="margin-top: 6px; float: right">-->
        <!--                                <el-pagination layout="->, total, prev, pager, next" background small-->
        <!--                                               :current-page.sync="missions.paginator.current_page"-->
        <!--                                               :page-size="missions.paginator.per_page"-->
        <!--                                               :total="missions.paginator.total"-->
        <!--                                               @size-change="MissionTablePageSizeChange"-->
        <!--                                               @current-change="MissionTableCurrentPageChange">-->
        <!--                                </el-pagination>-->
        <!--                            </div>-->
        <!--                        </el-col>-->
        <!--                    </el-row>-->
        <!--                </el-col>-->
        <!--            </el-row>-->
        <!--        </section>-->

    </el-container>

</div>
</body>
<!-- import JavaScript -->
<script>
    const app = new Vue({
        router: router,
        data: function () {
            return {
                menu_left: {
                    open: false,
                    direction: 'ltr',
                },
            }
        }
    }).$mount('#app')
    // const app = new Vue({
    //     el: '#app',
    //     data: () => {
    //         return {
    //             menu_left: {
    //                 open: false,
    //                 direction: 'ltr',
    //             },
    //             missions: {
    //                 data: [],
    //                 editing_item: {
    //                     id: null,
    //                     no: null,
    //                     type: null,
    //                     title: null,
    //                     requirement_desc: null,
    //                     rewards_desc: null,
    //                     unlock: null,
    //                     hint: null,
    //                     latest_contribution_id: null,
    //                 },
    //                 filter: {
    //                     type: null,
    //                     keyword: '',
    //                 },
    //                 paginator: {
    //                     current_page: 1,
    //                     page_sizes: [50, 200],
    //                     page_step: 50,
    //                     per_page: 50,
    //                     total: null,
    //                 },
    //                 sorter: {
    //                     column: null,
    //                     order: null,
    //                 },
    //             },
    //             mission_types: {
    //                 current_key: '',
    //                 data: [],
    //             },
    //         };
    //     },
    //     mounted() {
    //         this.refreshMissionsData();
    //         this.fetchMissionTypesData();
    //     },
    //     computed: {
    //         tableHeight() {
    //             return window.innerHeight - 122
    //         }
    //     },
    //     methods: {
    //         // 获取任务数据
    //         refreshMissionsData() {
    //             this.axios.get(API_URL + '/api/missions', {
    //                 params: {
    //                     mission_type: this.missions.filter.type, // 筛选：任务类型
    //                     keyword: this.missions.filter.keyword, // 筛选：任务关键字
    //                     page: this.missions.paginator.current_page, // 选择当前页，默认为 1
    //                     per_page: this.missions.paginator.per_page, // 分页大小，默认 50
    //                     column: this.missions.sorter.column, // 排序列
    //                     order: this.missions.sorter.order // 排序方向
    //                 }
    //             }).then((res) => {
    //                 this.missions.data = res.data.data;
    //                 this.missions.paginator.current_page = res.data.current_page;
    //                 this.missions.paginator.per_page = res.data.per_page;
    //                 this.missions.paginator.total = res.data.total;
    //             }).catch((res) => {
    //                 console.log(res);
    //             });
    //         },
    //         // 获取任务类型数据
    //         fetchMissionTypesData() {
    //             this.axios.get(API_URL + '/api/mission_types').then((res) => {
    //                 this.mission_types.data = res.data;
    //             }).catch((res) => {
    //                 console.log(res);
    //             });
    //         },
    //         // 任务表格排序状态发生变更
    //         MissionsTableSortChange(sorter) {
    //             this.missions.sorter.column = sorter.prop;
    //             this.missions.sorter.order = sorter.order;
    //             this.refreshMissionsData();
    //         },
    //         // 任务筛选器：任务类型变更
    //         MissionsTableFilterTypeChange(mission_type) {
    //             this.missions.filter.type = mission_type;
    //             this.refreshMissionsData();
    //         },
    //         // 任务筛选器：任务关键字变更
    //         MissionsTableFilterKeywordChange(keyword) {
    //             this.refreshMissionsData();
    //         },
    //         // 修改分页大小
    //         MissionTablePageSizeChange(size) {
    //             this.missions.paginator.per_page = size;
    //             this.refreshMissionsData();
    //         },
    //         // 任务表格翻页
    //         MissionTableCurrentPageChange(page) {
    //             this.missions.paginator.current_page = page;
    //             this.refreshMissionsData();
    //         },
    //     },
    // })
</script>
</html>